import '../model/order_view_model.dart';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import '../action.dart';
import 'dart:io';
import '../../../app_files.dart';

const double kImageWidth = 90;
const double kTextFieldHeight = 70;

class ConfigWidget extends StatelessWidget {
  final OrderConfigModel model;
  final Dispatch dispatch;

  const ConfigWidget(this.model, this.dispatch);

  Widget _selectWidget(ConfigValue value) {
    bool isSelect = model.values.contains(value);
    return InkWell(
      child: Container(
        color: Colors.white,
        padding: EdgeInsets.only(top: 8, bottom: 8),
        child: Row(
          children: [
            Expanded(
              child: Container(
                padding: EdgeInsets.only(right: 12),
                child: Text(
                  value.name,
                  style: TextThemeConfig.Font14WithColor22,
                ),
              ),
            ),
            Image.asset(
                isSelect ? 'images/icon_select.png' : 'images/icon_normal.png'),
          ],
        ),
      ),
      onTap: () =>
          dispatch(OrderViewActionCreator.onSetConfigData(model, value)),
    );
  }

  Widget _itemWidget(ConfigValue value) {
    bool isSelect = model.values.contains(value);
    return InkWell(
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
        child: Text(
          value.name,
          style: !isSelect
              ? TextThemeConfig.Font13WithColor66
              : TextThemeConfig.Font13WithColorblue,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(2)),
          color: isSelect ? Color(0xffE6EEFF) : Color(0xffF5F5F5),
        ),
      ),
      onTap: () =>
          dispatch(OrderViewActionCreator.onSetConfigData(model, value)),
    );
  }

  Widget _normalWidget() => InkWell(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          child: Text(
            '正常',
            style: (model.isNormal == null || !model.isNormal)
                ? TextThemeConfig.Font13WithColor66
                : TextThemeConfig.Font13WithColorblue,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(2)),
            color: (model.isNormal == null || !model.isNormal)
                ? Color(0xffF5F5F5)
                : Color(0xffE6EEFF),
          ),
        ),
        onTap: () => dispatch(OrderViewActionCreator.onSetNormalData(model)),
      );

  Widget _otherWidget() => InkWell(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
          child: Text(
            '其他问题',
            style: !model.hasOther
                ? TextThemeConfig.Font13WithColor66
                : TextThemeConfig.Font13WithColorblue,
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(2)),
            color: !model.hasOther ? Color(0xffF5F5F5) : Color(0xffE6EEFF),
          ),
        ),
        onTap: () => dispatch(OrderViewActionCreator.onTapOther(model)),
      );

  Widget _imageWidget() => Container(
        margin: EdgeInsets.only(top: 20),
        height: kImageWidth,
        child: ListView.builder(
          itemBuilder: (BuildContext context, int index) {
            if (index == model.imageList.length) {
              return InkWell(
                child: Container(
                  margin: EdgeInsets.only(right: 12),
                  width: kImageWidth,
                  height: kImageWidth,
                  color: Color(0xffF5F5F5),
                  child: Align(
                    child: Image.asset('images/icon_camera.png'),
                  ),
                ),
                onTap: () =>
                    dispatch(OrderViewActionCreator.onTapAddPic(model)),
              );
            } else {
              var file = model.imageList[index];
              return InkWell(
                child: Container(
                  margin: EdgeInsets.only(right: 12),
                  width: kImageWidth,
                  height: kImageWidth,
                  child: file is File
                      ? Image(
                    image: FileImageEx(file),
                    width: kImageWidth,
                    height: kImageWidth,
                    fit: BoxFit.fill,
                  )
                      : CustomImage(
                    file,
                    fit: BoxFit.fill,
                    width: kImageWidth,
                    height: kImageWidth,
                  ),
                ),
                onTap: () =>
                    dispatch(OrderViewActionCreator.onTapPic(model, file)),
              );
            }
          },
          itemCount: model.imageList.length + 1,
          scrollDirection: Axis.horizontal,
          itemExtent: kImageWidth + 12,
          padding: EdgeInsets.only(),
        ),
      );

  Widget _editWidget() => Container(
        margin: EdgeInsets.only(top: 12),
        height: kTextFieldHeight,
        child: TextField(
          minLines: 1,
          maxLines: 10,
          controller: model.textEditingController,
          style: TextThemeConfig.Font13WithColor22,
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "请在此处描述问题...",
            hintStyle: TextThemeConfig.Font13WithColor99,
            contentPadding: EdgeInsets.only(),
          ),
          onChanged: (String str) {
            if (str.length > ThemeConfig.descTextLength)
              model.textEditingController.text =
                  str.substring(0, ThemeConfig.descTextLength);
          },
        ),
      );

  @override
  Widget build(BuildContext context) {
    Widget _contentWidget() {
      if (model.isRemind) {
        List<Widget> items =
            model.configs.map((e) => _selectWidget(e)).toList();
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: items,
        );
      } else {
        bool hasImg =
            (model.values.length != 0 && !model.isNoneNormal) || model.hasOther;
        List<Widget> items = model.configs.map((e) => _itemWidget(e)).toList();
        items.insert(0, _normalWidget());
        items.add(_otherWidget());
        return Padding(
          padding: EdgeInsets.only(top: 12, bottom: 8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Wrap(
                spacing: 20.0, // 主轴(水平)方向间距
                runSpacing: 15.0, // 纵轴（垂直）方向间距
                alignment: WrapAlignment.start,
                children: items,
              ),
              model.hasOther ? _editWidget() : Container(),
              hasImg ? _imageWidget() : Container(),
            ],
          ),
        );
      }
    }

    return Container(
      padding: EdgeInsets.only(left: 15, right: 15, bottom: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border(
            bottom: BorderSide(color: ThemeConfig.separeColor, width: 10)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 44,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                model.configName,
                style: TextThemeConfig.Font16WithColorBold22,
              ),
            ),
            margin: EdgeInsets.only(bottom: 4),
            decoration: BoxDecoration(
                border:
                    Border(bottom: BorderSide(color: ThemeConfig.separeColor))),
          ),
          _contentWidget(),
        ],
      ),
    );
  }
}
